<template>
    <!-- 歌单推荐 -->
    <div id="carousel">
        <h2>歌单推荐</h2>
        <div class="block">
            <el-carousel height="300px">
                <el-carousel-item v-for="item in 3" :key="item" class="recommend">
                    <div v-for="(o, index) in songList[item]" :key="index">
                        <div class="card">
                            <img :src='"/api/" + o.songListImg' @click="toPlayLists(o.songListName)">
                            <br>
                            <a @click="toPlayLists(o.songListName)" class="demonstration">
                                {{ o.songListName }}
                            </a>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
    data() {
        return {
            songList: "",
        }
    },
    computed: {
        ...mapState("user", ["user"])
    },
    methods: {
        toPlayLists: function (name) {
            if(this.user == null){
                this.$message({
                    message: '请先登录',
                    type: 'warning'
                });
                this.$router.push('/');
            }else{
                this.$router.push({ path: "/playLists", query: { name: name,userID: this.user.userID } })
            }
        }
    },
    created: function () {
        this.axios({
            url: "/api/listens/songLists"
        }).then(res => {
            this.songList = res.data.data.data
            for (let i = 1; i <= 3; i++) {
                this.songList[i] = this.songList.slice((i - 1) * 5, i * 5)
            }
        }).catch(err => {
            console.log(err);
            console.log("请求失败1");
        })
    }
};
</script>

<style>
#carousel {
    /* background: linear-gradient(#f2f2f2,white); */
    width: 80%;
    margin: 0px auto;
    z-index: 1;
}

#carousel .recommend {
    display: flex;
    background: plum;
}

#carousel .recommend .card {
    margin-top: 20px;
    margin-left: 13px;
}

#carousel .recommend .card img {
    width: 224px;
    height: 224px;
}

#carousel .recommend .card img:hover {
    cursor: pointer;
}

#caCont {

    background: pink;
    height: 300px;
}

/* .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
} */
</style>